<template>
    <div>
      <a-select
        show-search
        v-bind="$attrs"
        v-on="$listeners"
        style="width: 100%;"
        :placeholder="placeholder"
        :filter-option="filterOption"
        :not-found-content="loadingUser ? loadingUser : null"
        v-model="currentValue"
        @search="handlerSearchEmployee"
        @change="handleChange"
        @popupScroll="scrollMore"
      >
          <a-icon v-if="loadingUser" style="color: #096dd9" slot="suffixIcon" type="loading" />
          <a-spin v-if="loadingUser" slot="notFoundContent" size="small" />
          <a-select-option  v-for="item in groupLists" :key="item.userId">{{item.name}}</a-select-option>
      </a-select>
        <!-- <a-select
            show-search
            v-bind="$attrs"
            v-on="$listeners"
            :placeholder="placeholder"
            v-model="currentValue"
            option-filter-prop="children"
            :filter-option="filterOption"
            option-label-prop="label"
            style="width: 100%;"
            allowClear
        >
            <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />

            <a-select-option v-for="(item, index) in list" :key="item[replaceFields.value]" 
              :value="item[replaceFields.value]"
              :label="item[replaceFields.name]"
            >
                {{item[replaceFields.optName]}}
            </a-select-option>
        </a-select> -->
    </div>
</template>
<script>
// import { queryAllYouthMemberList } from '@/api/partyMasses/leagueManage'
import debounce from 'lodash/debounce';
import { getEmployeesList } from '@/api/system/menuAndAuth.js'
export default {
    name:'a'+ Date.now(),
    props: {
        params: {
          type: Object,
          default() {
            return {}
          }
        },
        // v-model绑定的数据
        value: {
            type: [Array, String, Object, Number],
        },
        replaceFields: {
          type: Object,
          default() {
              return { value: 'userId', name: 'userName', optName: 'optName' }
          },
        },
        dataList: {
          type: Array,
          default() {
            return []
          }
        },
        placeholder: {
            type: String,
            default() {
                return '请选择'
            },
        },
    },
    computed: {
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                // if (this.list.length > 0) {
                //     this.$emit(
                //         'update:option',
                //         this.list?.find((item) => item.id === this.value)
                //     )
                //     this.$emit(
                //         'getOption',
                //         this.list.find((item) => item.id === this.value)
                //     )
                // }
                return this.value ? this.value : undefined
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
    data() {
        return {
            handlerSearchEmployee: null,
            loadingUser:false,
            fetching: false,
            pageNumber: 1,
            totalPages: 0,
            groupLists: [],
        }
    },
    mounted() {
      // if (this.dataList.length > 0) {
      //   this.list = this.dataList;
      // } else {
        this.getOrgUsers() // 获取所有人员列表
        // this.querySelectData();
      // }
    },
    created() {
      this.handlerSearchEmployee = debounce((val) => {
        this.getOrgUsers(val)
      }, 800);
    },
    methods: {
      handleChange(val) {
        let key = val;
        if (this.$attrs.labelInValue!== undefined) {
          key = val.key;
        }
        const opt = this.groupLists.filter(e => e.userId == key)[0];
        this.$emit('isChange', val, opt)
      },
      getOrgUsers(val, loadFlag = ''){
        if(this.loadingUser) return
        this.loadingUser = true
        if(loadFlag === 'more') {
          this.pageNumber = this.pageNumber + 1
        } else {
          // 重置页码参数
          this.pageNumber = 1
          this.totalPages = 0
          this.groupLists = []
        }
        getEmployeesList({nameLike:val?val:'',queryPostRelation:true,pageNumber:this.pageNumber,pageSize:this.pageSize}).then((res) => {
          this.loadingUser = false
          const list = res.data || []
          this.groupLists =  this.groupLists.concat(list)
          this.totalPages = res.totalPages
        }).catch(() => {
          this.loadingUser = false
        })
      },
      // 下拉滚动加载
      scrollMore(e) {
        const { target } = e
        var total = target.scrollTop + target.offsetHeight
        var scrollHeight = target.scrollHeight
        // this.pageNo是当前页 this.totalPage是总页数
        if (total >= scrollHeight - 1 && total < scrollHeight + 1 && this.pageNumber <= this.totalPages ) {
          this.getOrgUsers('', 'more') // 调用api方法
        }
      },
      // querySelectData() {
      //   // 获取下拉框列表
      //   this.fetching = true;
      //   queryAllYouthMemberList(this.params).then((res) => {
      //       this.fetching = false
      //       const dataList = res.data || [];
      //       this.list = dataList
      //       // this.$emit('update:list', this.list)
      //       // this.$emit('getList', this.list)
      //   })
      //   .catch((res) => {
      //       this.fetching = false;
      //   })
      // },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      }
    }
}
</script>
